<template>
	<div style='background: #fff'>
		<div class='content-title'>分组管理</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' @click='addGroup'>创建分组</button>
			<div style="padding:1px">
				<Table :columns="groupList" :data="groupData" stripe></Table>
			</div>
		</div>
		<!-- 创建分组 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>{{dataId?'编辑分组':'创建分组'}}</span>
            </p>
            <div>
               <Form :label-width='75' label-position='left'>
                    <FormItem label='名称'>
                        <p slot='label'><span class='star'>*</span>名称</p>
                        <Input v-model='name' placeholder='请输入名称（推荐使用英文）'></Input>
                    </FormItem>
                    <FormItem style="display: none;">
                        <Input></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				groupList: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                     {
                        title: '创建时间',
                        key: 'created_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                        }
                    },
                     {
                        title: '更新时间',
                        key: 'updated_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                groupData: [],
                dataId:0,
                configData:{},
                name:'',
			}
		},
		created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            //数据表
            this.fetch('/home/app/auth/class/info').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
        methods:{
            tablesName(item){
                for(let key in item){
                    return item[key];
                }
            },
            getData(){
                this.fetch('/home/app/auth/class').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.groupData = res.data.data;
                    }
                })
            },
            //创建密钥
            addGroup(){
                this.modal = true;
                this.dataId = 0;
                this.name = '';
            },
            cancel(){
                this.modal = false;
            },
            sure(){
                if(!this.name){
                    this.$Message.warning('请填写名称')
                    return;
                }
                let data = {
                    name:this.name,
                }
                if(this.dataId){
                    data.id = this.dataId;
                }
                this.fetch('/home/app/auth/add/class',data).then(res=>{
                    if(res&&res.data.code&&res.data.data){
                        this.$Message.success(this.dataId?'编辑成功':'新增成功')
                        this.getData();
                        this.modal = false;
                    }
                })
            },
            edit(row){
                this.dataId = row.id;
                this.modal = true;
                this.fetch('/home/app/auth/class/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.name = res.data.data.name;
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>若删除分组，会对其他设置产生影响。确定删除吗?</p>',
                    onOk: () => {
                        this.fetch('/home/app/auth/del/class/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
                
            }
        }
	}
</script>
